<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { reactive } from 'vue'
import { useDicts } from './hooks/use-dicts'

import { type RequestAuthIndex, useRealNameAuthIndex, useAuthPass } from '@fl/api/anjutong/coupon-statistics'
import { useGetDictData } from '@fl/api/advertising-api'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'anjutong-setting-real-name-auth',
})

// const { push } = useRouter()
const tableRef = ref()
const { dicts: { AuthOption }, useDict } = useDicts()
const certificateOptions = ref<any>([])
const certificateDict = ref<any>([])

const TypeDict = {
    1: 'warning',
    2: 'success',
    3: 'primary',
    4: 'info'
}

// 搜索条件、分页参数
const initialState = {
    userAccount: '',
    userName: '',
    certType: '',
    certCode: '',
    auditStatus: '',
}
const state = ref<RequestAuthIndex>(cloneDeep(initialState))

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))

// 查询列表
const params = computed(() => ({
    pageNum: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
    ...state.value,
}))

const { data, isLoading } = useRealNameAuthIndex(params)
const { data: dictList } = useGetDictData({ dictType: 'certificate_type' })
const { isPending, mutate } = useAuthPass()
const records = ref()
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.rows)
        tablePage.value.total = data.value.total!
        console.log('records.value', records.value)

    }
})
watchEffect(() => {
    if (dictList.value) {
        certificateOptions.value = dictList.value.certificate_type
        certificateDict.value = certificateOptions.value.reduce((accumulator, current) => {
            accumulator[current.value] = current.label
            return accumulator
        }, [])
        // console.log('certificateOptions.value', certificateOptions.value, certificateDict.value)
    }
})



// 搜索
function submit(values: RequestAuthIndex) {
    state.value = { ...values }
    tablePage.value.currentPage = 1
}

// 重置
function reset() {
    state.value = initialState
    tablePage.value = initialPage
}

// 列表：通过
function goPass(row: any) {
    goAudit(row, useDict('AuthOption', '已通过', false) )
}

// 列表：驳回
function goReject(row: any) {
    goAudit(row, useDict('AuthOption', '已驳回', false) )
}

function goAudit(row: any, type: string) {
    const params = {
        id: row.id,
        audit: Number(type)
    }
    console.log('params', params)
    mutate(params, {
        onSuccess: () => {
            ElMessage.success('操作成功')
            reset()
        },
    })
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 6,
        },
        label: '用户账号',
        prop: 'userAccount',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '证件姓名',
        prop: 'userName',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '证件类型',
        prop: 'certType',
        options: computed(() => {
            return certificateOptions.value
        }),
        valueType: 'select',
    },
    {
        colProps: {
            span: 6,
        },
        label: '证件号码',
        prop: 'certCode',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '状态',
        prop: 'auditStatus',
        options: AuthOption,
        valueType: 'select',
    },
]
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { title: '序号', type: 'seq', width: 70 },
        { field: 'userAccount', title: '用户账号' },
        { field: 'userName', title: '证件姓名' },
        { field: 'certType', slots: { default: 'certType' }, title: '证件类型' },
        { field: 'certCode', title: '证件号码' },
        { field: 'certImgUriList', slots: { default: 'certImgUriList' }, title: '照片', width: 240 },
        { field: 'applyTime', title: '申请时间' },
        { field: 'auditStatus', slots: { default: 'auditStatus' }, title: '审核状态' },
        { slots: { default: 'operate' }, title: '操作', width: 130 },
    ],
})
</script>

<template>
    <ElCard class="mb-20" shadow="never">
        <SearchForm v-bind="state" :columns="columns" submit-text="搜索" @reset="reset" @submit="submit" />
    </ElCard>

    <ElCard shadow="never">
        <SearchTable ref="tableRef" v-bind="gridOptions" v-model:pager="tablePage" :loading="isLoading" :data="records"
            :row-config="{ height: 80 }" :height="600" @page-change="handlePageChange">
            <template #certType="{ row }">
                {{ certificateDict[row.certType] }}
            </template>

            <template #auditStatus="{ row }">
                <!-- {{ useDict('AuthOption', row.auditStatus) }} -->
                <ElTag :type="TypeDict[row.auditStatus]">
                    {{ useDict('AuthOption', row.auditStatus) }}
                </ElTag>
            </template>

            <template #certImgUriList="{ row }">
                <div v-if="row?.certImgUriList?.length > 0">
                    <el-image class="img" v-for="(item, index) in row.certImgUriList" :key="index" style="width: 60px; height: 60px" :src="item"
                        :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[item]" :initial-index="4"
                        fit="contain" />
                </div>

            </template>

            <template #operate="{ row }">
                <div v-if="row.auditStatus === 1">
                    <el-popconfirm title="确认通过吗？" @confirm="goPass(row)">
                        <template #reference>
                            <el-button type="primary" class="small" text>
                                通过
                            </el-button>
                        </template>
                    </el-popconfirm>

                    <el-popconfirm title="确认驳回吗？" @confirm="goReject(row)">
                        <template #reference>
                            <el-button class="small" text>
                                驳回
                            </el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
        </SearchTable>
    </ElCard>
</template>

<style lang="scss" scoped>
:deep(.small.el-button) {
    padding: 4px;
    margin-left: 6px;
}
.img {
    margin-left: 8px;
    background: #eee;
}
</style>
